<template>
  <div>
    <!-- 个人成就 -->
    <div class="achievement">
      <div class="title">个人成就</div>
      <p class="item">
        <i class="iconfont icon-wenzhangzongshu"></i>
        <span>文章总数：{{ articleCount }}</span>
      </p>
      <p class="item">
        <i class="iconfont icon-beiguanzhushu"></i>
        <span>被关注数：{{ follow_num }}</span>
      </p>
      <p class="item">
        <i class="iconfont icon-dianzan"></i>
        <span>总点赞数： {{ totalLikeNum }}</span>
      </p>
      <p class="item">
        <i class="iconfont icon-iconkuozhan_liulanpre"></i>
        <span>总阅读数：{{ totalHitNum }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AchievementList',
  props: {
    follow_num: {
      type: Number,
      default: 0
    },
    articleCount: {
      type: Number,
      default: 0
    },
    totalLikeNum: {
      type: Number,
      default: 0
    },
    totalHitNum: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.achievement {
  // position: sticky;
  // top: 20px;
  background-color: #fff;
  padding: 20px 50px;
  margin-bottom: 20px;
  border-radius: 5px;
  .title {
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    color: #21293c;
    position: relative;
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid #f2f6f9;
  }
  .item {
    font-size: 14px;
    color: #666;
    line-height: 2;
  }
  .iconfont {
    margin-right: 10px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
  }
}
</style>
